<template>
  <el-dialog
      v-model="centerDialogVisible"
      :title="formTitle"
      width="25%"
      destroy-on-close
      center
      @close="dialogClose">
    <el-form
        ref="ruleFormRef"
        label-position="top"
        label-width="100px"
        :model="formLabelAlign"
        :rules="rules">
      <el-form-item label="区域名称" prop="domainName">
        <el-input v-model="formLabelAlign.domainName"/>
      </el-form-item>
      <el-form-item label="所属行政区" prop="cascaderList">
        <el-cascader
            v-model="formLabelAlign.cascaderList"
            placeholder="请选择行政区"
            :options="options"
            filterable
        />
      </el-form-item>
      <el-form-item label="区域负责人" prop="managerName">
        <el-input v-model="formLabelAlign.managerName"/>
      </el-form-item>
      <el-form-item label="联系电话" prop="managerMobile">
        <el-input v-model="formLabelAlign.managerMobile"/>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="formLabelAlign.address"/>
      </el-form-item>
    </el-form>
    <div class="bottomButton">
      <el-button class="affirm" @click="resetForm" style="width: 47.5%;height: 100%;">确认</el-button>
      <el-button class="cancel" @click="centerDialogVisible = false" style="width: 47.5%;height: 100%;">取消</el-button>

    </div>
  </el-dialog>

</template>

<script>
import {isvalidPhone} from "@/utils/public";

let me;
let validPhone = (rule, value, callback) => {//验证手机号是否合法
  if (value && !isvalidPhone(value)) {
    callback(new Error("请输入正确的11位手机号码"));
  } else {
    callback();
  }
};
export default {
  name: "EditDomainDialog",
  data() {
    return {
      formTitle: '',
      rules: {
        domainName: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        managerName: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        managerMobile: [
          {required: true, message: "请输入手机号", trigger: "blur"},
          {trigger: "blur", validator: validPhone, required: true}
        ],
        cascaderList: [{type: 'array', required: true, message: '请选择行政区', trigger: 'change'}]
      },
      formLabelAlign: {
        domainName: '',
        managerMobile: '',
        address: '',
        districtId: '',
        managerName: '',
        cityId: '',
        provinceId: '',
        cascaderList: ''
      },

      options: [],
      centerDialogVisible: false
    }
  },
  methods: {
    showDialog(row) {
      me = this;
      this.centerDialogVisible = true;
      this.$nextTick(() => {
        this.formTitle = '新增区域信息';
        me.formLabelAlign.actionType = 'domainAdd';
        me.message='添加成功';
        if (row) {
          me.formLabelAlign = JSON.parse(JSON.stringify(row));
          me.formLabelAlign.cascaderList = [row.provinceId, row.cityId, row.districtId];
          me.formTitle = '编辑区域信息';
          me.formLabelAlign.actionType = 'domainUpdate';
          me.message='修改成功';
        }
        this.selCityOption();
      });
    },
    async selCityOption() {
      let response = await this.$asyncPost("district", {actionType: "districtCascadeQuery",});
      if (response.success) {
        me.options = response.downDropList;
      } else {
        this.$message.error(response.message);
      }
    },
    resetForm() {
      me.$refs.ruleFormRef.validate(async (valid, fields) => {
        if (valid) {
          this.formLabelAlign.provinceId = this.formLabelAlign.cascaderList[0];
          this.formLabelAlign.cityId = this.formLabelAlign.cascaderList[1];
          this.formLabelAlign.districtId = this.formLabelAlign.cascaderList[2];
          let response = await me.$asyncPost("domain", me.formLabelAlign);
          if (response.success) {
            me.$message.success(me.message);
            me.centerDialogVisible = false;
            me.$parent.selTableData();
          }
        } else {
          console.log('error submit!', fields)
        }
      })
    },
    dialogClose() {
      this.$refs.ruleFormRef.resetFields();//关闭的时候一定要清空之前的form表单已填写的数据！！！！！
    }
  }
}
</script>

<style scoped lang="scss">

</style>